<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../resource/dhtmlxsuitev508proeval/codebase/dhtmlx.js"></script>
    <link rel="stylesheet" href="../../../resource/dhtmlxsuitev508proeval/codebase/dhtmlx.css">
    <link rel="stylesheet" href="../../../resource/dhtmlxsuitev508proeval/skins/skyblue/dhtmlx.css">
    <script src="../../../js/jquery-3.4.1.js"></script>
    <style>

        .room-center {
            display: flex;
            justify-content: center;
        }

        .my-center {
            display: flex;
            justify-content: center;
            flex-direction: column;
            width: 300px;
            align-items: center;
            border: 1px solid black;
            border-radius: 3px;
            margin: 5px;
        }

        .my-center > * {
            margin: 5px;
        }

        .my-center textarea {
            width: 200px;
            height: 100px;
        }

        .my-center button {
            width: 100px;
        }

    </style>
</head>
<body style="text-align: center;">
<div id="gridbox" style="width:1300px;height:400px; margin: 100px auto;"></div>
<div class="room-center">
    <div class="my-center">
        <textarea readonly="readonly" id="cell2"></textarea>
        <button onclick="getCellValueByIndex(2)">获取选中行第2列的值</button>
    </div>
    <div class="my-center">
        <textarea readonly="readonly" id="rowCountArea"></textarea>
        <button onclick="getAllRowCount()">获取当前grid总行数</button>
    </div>
    <div class="my-center">
        <textarea readonly="readonly" id="rowIndexArea"></textarea>
        <button onclick="getRowIdByIndex()">根据下标来获取rowId</button>
    </div>
    <div class="my-center">
        <textarea readonly="readonly" id="foreachArea"></textarea>
        <button onclick="foreachRows()">foreach循环grid的数据</button>
    </div>
    <div class="my-center">
        <textarea readonly="readonly" id="setCellColorArea"></textarea>
        <button onclick="setCellColor()">设置字体颜色</button>
    </div>
</div>

<script>
    var mygrid = new dhtmlXGridObject('gridbox');
    //the path to images required by grid
    mygrid.setImagePath("../../../resource/dhtmlxsuitev508proeval/codebase/imgs/");
    mygrid.setHeader("Sales,Book title,Author,Price");//the headers of columns
    mygrid.setInitWidths("100,250,150,*");          //the widths of columns
    mygrid.setColAlign("right,left,left,left");       //the alignment of columns
    mygrid.setColTypes("ro,ed,ed,ed");                //the types of columns
    mygrid.setColSorting("int,str,str,int");          //the sorting types
    mygrid.init();      //finishes initialization and renders the grid on the page

    mygrid.addRow(1, ["s11", "s21", "s31", "s41"]);
    mygrid.addRow(2, ["s12", "s22", "s32", "s42"]);

    mygrid.setEditable(false);  // 禁用双击编辑列
    /**
     * 说明:
     * 1. rId: 被双击的列的id;
     * 2. cInd: 被双击第几列;
     */
    mygrid.attachEvent("onRowDblClicked", function (rId, cInd) {
        let rowData = mygrid.getRowData(rId);
        console.log(rowData);
    });

    function getCellValueByIndex(index) {
        // 获取选中行的rowId
        let rowId = mygrid.getSelectedRowId();
        if (isEmpty(rowId)) {
            return;
        }
        // 根据获取到的行的rowId来获取指定列的值
        let cellValue = mygrid.cells(rowId, index).getValue();
        $('#cell2').val(cellValue);
    }

    function getAllRowCount() {
        $('#rowCountArea').val(mygrid.getRowsNum());
    }

    function getRowIdByIndex() {
        // 获取当前grid的总行数
        let rowCount = mygrid.getRowsNum();
        let message = "";
        for (let i = 0; i < rowCount; i++) {
            // 根据序号获取rowId
            let rowId = mygrid.getRowId(i);
            message += (rowId + ' ' + mygrid.cells(rowId, 2).getValue() + "\n");
        }
        $('#rowIndexArea').val(message);
    }

    /**
     * 说明:
     * 1. forEachRow方法传入一个行数, 传入的参数是rowId, 可以使用这个rowId获取行的信息;
     */
    function foreachRows() {
        mygrid.forEachRow(function (id) {
            console.log(id, mygrid.cells(id, 2).getValue(), " <<<");
        });
    }

    function setCellColor() {
        // 获取选中行的rowId
        let rowId = mygrid.getSelectedRowId();
        if (isEmpty(rowId)) {
            return;
        }
        mygrid.cells(rowId, 2).setTextColor("red");
    }

    function isEmpty(value) {
        if (typeof value === "undefined") {
            return true;
        }
        if (value === null) {
            return true;
        }
        if (typeof value === "string") {
            return value === "";
        }
        return false;
    }

</script>
</body>
</html>